﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Overflow</title>
<style>
body {
	font: 100% tahoma;
	color: #2b2b2b;
	padding: 0px 5px;
}

h2 {
	font-size: 1.125em; /* 18px/16px */
	font-family: sans-serif;
	margin-bottom: 3px;
}

code {
	font-size: 1.2295em;
}

.first {
	margin-bottom: 45px;
}

div + h2 {
	padding-top: 5px;
	margin-top: 25px;
}

p {
	margin: 0 0 .75em;
	font-size: 13px;
}

div {
	background: #e0f7ac;
	height: 88px;
	width: 300px;
	border: 1px solid #666;
}

.example-hidden {
	overflow: hidden;
}

.example-scroll {
	overflow: scroll;
}

.example-auto {
	overflow: auto;
}
</style>
</head>
<body>

<h2>Default (<code>overflow: visible;</code>)</h2>
<div class="first">
	<p>My name is Eleina Shinn. Exploring the unknown and learning about our planet is what brings me the most pleasure.</p>

	<p>During the last five years I traveled to over 20 countries on 4 continents, often with just my backpack and a map in hand.</p>
</div>

<h2><code>overflow: hidden;</code></h2>
<div class="example-hidden">
	<p>My name is Eleina Shinn. Exploring the unknown and learning about our planet is what brings me the most pleasure.</p>

	<p>During the last five years I traveled to over 20 countries on 4 continents, often with just my backpack and a map in hand.</p>
</div>

<h2><code>overflow: scroll;</code></h2>
<div class="example-scroll">
	<p>My name is Eleina Shinn. Exploring the unknown and learning about our planet is what brings me the most pleasure.</p>

	<p>During the last five years I traveled to over 20 countries on 4 continents, often with just my backpack and a map in hand.</p>
</div>

<h2><code>overflow: auto;</code></h2>
<div class="example-auto">
	<p>My name is Eleina Shinn. Exploring the unknown and learning about our planet is what brings me the most pleasure.</p>

	<p>During the last five years I traveled to over 20 countries on 4 continents, often with just my backpack and a map in hand.</p>
</div>
</body>
</html>